<template>
	<view>
		<view class="user ss-flex ss-m-b-14">
			<view class="ss-m-r-20 ss-flex">
				<image :src="'https://images.weserv.nl/?url=' + item.user.photoUrl" class="avatar"></image>
			</view>
			<view class="nickname ss-m-r-20">
				{{ item.user.name }} 发表于 {{ sheep.$helper.timeFormat(item.created, "yyyy年mm月dd日 hh时MM分") }}
			</view>
		</view>
		<view class="content">
      <text v-if="state.view === 'source'" class="content">
		    {{ item.comments }}
	    </text>
			<text v-if="state.view === 'target'" class="content">
		    {{ state.chinese }}
      </text>
			<view class="ss-flex ss-m-r-20" style="color: #F39800">
				<button v-if="state.view === 'source'" class="ss-reset-button more-btn" @tap="onTranslate">显示译文</button>
				<button v-if="state.view === 'target'" class="ss-reset-button more-btn" @tap="onReset">显示原文</button>
			</view>
		</view>
		<!--<view class="ss-m-t-24" v-if="item.images?.length">
			<scroll-view class="scroll-box" scroll-x scroll-anchoring>
				<view class="ss-flex">
					<view v-for="(item, index) in item.images" :key="item" class="ss-m-r-10">
						<su-image
							class="content-img"
							isPreview
							:previewList="state.commentImages"
							:current="index"
							:src="item"
							:height="120"
							:width="120"
							mode="aspectFill"
						></su-image>
					</view>
				</view>
			</scroll-view>
		</view>-->
	</view>
</template>

<script setup>
import sheep from '@/sheep';
import {reactive} from 'vue';

const props = defineProps({
	item: {
		type: Object,
		default() {
		},
	},
});
const state = reactive({
	commentImages: [],
	chinese: '',
	view: 'source'
});

props.item.images?.forEach((i) => {
	state.commentImages.push(sheep.$url.cdn(i));
});

function onReset() {
	state.view = 'source'
}

function onTranslate() {
	if (state.chinese) {
		state.view = 'target'
		return
	}
	// 加载提示
	sheep.$helper.toast('正在翻译');
	sheep.$api.goods.translate({
		content: props.item.comments
	}).then(res => {
		state.chinese = res;
		state.view = 'target'
	})
}
</script>

<style lang="scss" scoped>
.avatar {
	width: 52rpx;
	height: 52rpx;
	border-radius: 50%;
}

.nickname {
	font-size: 26rpx;
	font-weight: 500;
	color: #999999;
}

.content {
	width: 636rpx;
	font-size: 26rpx;
	font-weight: 400;
	color: #333333;
	white-space: pre-wrap; // 保持文本的格式并允许自动换行
	word-wrap: break-word; // 长单词或URL内部断行，防止溢出
	overflow-wrap: break-word; // 提高兼容性
}

.card-header {
	.line {
		width: 6rpx;
		height: 30rpx;
		background: linear-gradient(180deg, var(--ui-BG-Main) 0%, var(--ui-BG-Main-gradient) 100%);
		border-radius: 3rpx;
	}

	.title {
		font-size: 30rpx;
		font-weight: bold;
	}

	.des {
		font-size: 24rpx;
		color: $dark-9;
	}

	.more-btn {
		font-size: 24rpx;
		color: var(--ui-BG-Main);
	}
}
</style>
